<html
	xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<head>
<title>Books</title>

</head>
<body>
<wicket:extend>
<script type="text/javascript" src="fg.menu.js"></script>
<script type="text/javascript" wicket:id="myScript"></script>

<script type="text/javascript">
	(function($) {
		// we can now rely on $ within the safety of our "bodyguard" function
		$(document).ready(function() {
			// BUTTONS
			$('.fg-button').hover(function() {
				$(this).removeClass('ui-state-default').addClass('ui-state-focus');
			}, function() {
				$(this).removeClass('ui-state-focus').addClass('ui-state-default');
			});

			$.get(url, function(data) { // grab content from another page
				$('#flyout').menu({
					content : data,
					width: 205,
					flyOut : true
				});
			});

		});
	})(jQuery);

</script>


<div wicket:id="categoryButton">
<span id="flyout"><span></span>&nbsp;</span>
</div>
<div wicket:id="books" style="width: 700px; float: right; min-height: 500px;">

	<h2><wicket:message key="bookList">Book List</wicket:message></h2>
	
	<div wicket:id="bookList" style="border: 1px black solid; margin-bottom: 5px; padding-left: 2px;">
		<h3><a href="#" wicket:id="viewLink"><span wicket:id="title">Title goes here</span></a></h3>
		<wicket:message key="by">By</wicket:message> <a href="#" wicket:id="authorLink"><strong wicket:id="authorName">Author goes here</strong></a>
		<br />
		<wicket:message key="publishDate">Publish Date</wicket:message>: <span wicket:id="publishDate">Date goes here</span>
		<p>
			<b><wicket:message key="tags">Tags</wicket:message>:</b> 
			<span wicket:id="tagList">
				<a href="#" wicket:id="tagLink">#<span wicket:id="tagName"></span></a>&nbsp;
			</span>
		</p>
		<p>
			<span wicket:id="rating1"></span>
		</p>
		<p>
			<a href="#" wicket:id="detailsLink"><wicket:message key="view">View</wicket:message></a>
			<span wicket:id="deleteLinkContainer">
				 | <a href="#" wicket:id="deleteLink"><wicket:message key="delete">Delete</wicket:message></a>
			</span>
			<span wicket:id="editLinkContainer">
				 | <a href="#" wicket:id="editLink"><wicket:message key="edit">Edit</wicket:message></a>
			</span>
		</p>
	</div>
	<div wicket:id="feedbackMessage"></div>

	<div wicket:id="footerPaginator"></div>  

</div>
</wicket:extend>
</body>
</html>